<script lang='ts' setup>
import { appNotify, NotifyType } from "@/models/app.notify";
import { appRef } from "@/models/app.ref";
import { UserInfo, UserRole } from "@/models/user";
import router from "@/router";
import { userService } from "@/services/user.service";
import { ref, defineProps, onMounted } from "vue";

type MenuInfo = {
  name: string;
  to: string;
  disabled?: boolean;
};
type OperationInfo = {
  icon?: string;
  name?: string;
  callabck?: Function;
};

const user = ref({} as UserInfo);

const menus = ref([] as MenuInfo[]);
const menu = ref("");
const operations = ref([] as OperationInfo[]);

onMounted(() => {
  appNotify.addListener(NotifyType.RouterChange, routerChange, "app_header");
  menus.value = [
    {
      name: "便签",
      to: "/note",
    },
    {
      name: "工具",
      to: "/tools",
    },
    {
      name: "文库",
      to: "/docs",
    },
    // {
    //   name: "代码分享",
    //   to: "/code",
    // },
  ];
  user.value = appRef.user.data;
  if (user.value.role === UserRole.Root) {
    menus.value.push({ name: "admin", to: "/admin", })
  }
  operations.value = [
    {
      icon: "search",
      callabck: onSearch,
    },
    {
      name: user.value.email,
      callabck: onLogin,
    },
  ];
  routerChange();
});

function routerChange(opt?: NotifyType, msg?: string): void {
  const href = msg || location.href;
  menu.value = menus.value.find((val) => href.includes(val.to))?.name || "";
}

function onSearch() {
  console.log("搜索");
}

function onUser(e): void {
  if (e.value == 1) {
    router.push("mine");
  } else {
    userService.loginOut();
  }
}

function onLogin() {
  router.push("login");
}
</script>
<template>
  <div class="header">
    <t-head-menu v-model="menu" theme="light">
      <template #logo>
        <img height="28" src="@/assets/logo.png" alt="logo" />
      </template>
      <t-menu-item :value="item.name" v-for="item in menus" :key="item.to" :disabled="item.disabled" :to="item.to">
        {{ item.name }} </t-menu-item>
      <template #operations>
        <!-- <t-button variant="text" @click="onSearch"> <t-icon name="search" slot="icon" /></t-button> -->
        <t-dropdown v-if="user.uid" :options="[{ content: '个人中心', value: 1 }, { content: '退出登录', value: 2 }]"
          @click="onUser">
          <t-button variant="text" style="justify-content: flex-start;">
            <template #icon>
              <img class="avatar" v-if="appRef.user.data.avatar" :src="appRef.user.data.avatar">
              <span>{{ appRef.user.data.nick }}</span>
            </template>
          </t-button>
        </t-dropdown>
        <t-button v-else variant="text" @click="onLogin"> 登录 </t-button>
      </template>
    </t-head-menu>
  </div>
</template>
<style lang='scss' scoped>
.header {
  background-color: #ffffff;
  box-shadow: 0 0 7px #cccccc;
  width: 100%;
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 9;

  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>